<template>
  <div class="info" v-loading="loading">
    <div class="info-title">
      <el-card class="left" shadow="never">客户详情</el-card>
    </div>
    <div class="info-content">
      <el-card class="left" shadow="never">
        <div class="left-top">
          <div>编号：{{ customerInfo ? customerInfo.customer_number : "" }}</div>
          <el-button size="mini" type="primary" @click="edit">编辑</el-button>
        </div>
        <div class="left-bottom-info">
          <div style="font-weight: 600;padding: 10px 0;">客户资料</div>
          <div class="info-cus">
            <div>客户名称：</div>
            <div>{{ customerInfo ? customerInfo.name : '' }}</div>
          </div>
          <div class="info-cus">
            <div>客户简称：</div>
            <div>{{ customerInfo ? customerInfo.short_name : '' }}</div>
          </div>
          <div class="info-cus">
            <div>客户类型：</div>
            <div>{{ customerInfo ? customerInfo.entry_type_name : '' }}</div>
          </div>
          <div class="info-cus">
            <div>所属区域：</div>
            <div>
              {{ customerInfo ? customerInfo.province_name : '' }}
              {{ customerInfo ? customerInfo.city_name : '' }}
              {{ customerInfo ? customerInfo.county_name : '' }}
            </div>
          </div>
          <div class="info-cus">
            <div>详细地址：</div>
            <div>{{ customerInfo ? customerInfo.address : '' }}</div>
          </div>
          <div class="info-cus">
            <div>客户负责人：</div>
            <div>{{ customerInfo.owner_name ? customerInfo.owner_name : '' }}</div>
          </div>
          <div class="info-cus">
            <div>客户标签：</div>
            <div>{{ customerInfo ? customerInfo.tag_name : '' }}</div>
          </div>
          <div class="info-cus">
            <div>客户来源：</div>
            <div>{{ customerInfo ? customerInfo.source : '' }}</div>
          </div>
          <div class="info-cus">
            <div>客户行业：</div>
            <div>{{ customerInfo ? customerInfo.industry_name : '' }}</div>
          </div>
          <div class="info-cus">
            <div>企业性质：</div>
            <div>{{ customerInfo ? customerInfo.customer_type_name : '' }}</div>
          </div>
          <div class="info-cus">
            <div>上级单位：</div>
            <div>{{ customerInfo.parent ? customerInfo.parent.name : '' }}</div>
          </div>
          <div class="info-cus">
            <div>签约时间：</div>
            <div>{{ customerInfo ? customerInfo.contact_at: '' }}</div>
          </div>
          <div class="info-cus">
            <div>安全等级：</div>
            <div>{{ customerInfo ? customerInfo.safe_level : '' }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="right" shadow="never">
        <div class="mb-5 flex justify-between">
          <div>
<!--            <el-button icon="el-icon-message" size="small">发送邮件</el-button>-->
<!--            <el-button icon="el-icon-chat-dot-square" size="small">发送短信</el-button>-->
<!--            <el-button icon="el-icon-edit" size="small">批量编辑</el-button>-->
<!--            <el-button icon="el-icon-delete" size="small">批量删除</el-button>-->
<!--            <el-button icon="el-icon-bell" size="small">批量提醒</el-button>-->
          </div>
        </div>
        <div>
          <el-tabs v-model="tabsActive" class="info_tab" type="border-card">
            <el-tab-pane label="联系人" name="lxr">
              <User :id="id" />
            </el-tab-pane>
            <el-tab-pane label="客户产品" name="khcp">
              <Product :id="id"  :customerInfo="customerInfo"/>
            </el-tab-pane >
<!--            <el-tab-pane label="客户项目" name="khxm">-->
<!--              <Project :id="id"  :customerInfo="customerInfo"/>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="客户合同" name="khht">-->
<!--              <Contract :id="id"  :customerInfo="customerInfo"/>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="工单" name="gd">-->
<!--              <Order :id="id"  :customerInfo="customerInfo"/>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="财务信息" name="cwxx">-->
<!--              <Financial :id="id"  :customerInfo="customerInfo"/>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="发票信息" name="fpxx">-->
<!--              <Invoice :id="id"  :customerInfo="customerInfo"/>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="开票记录" name="kpjl">-->
<!--              <Invoiced :id="id"  :customerInfo="customerInfo"/>-->
<!--            </el-tab-pane>-->
          </el-tabs>
        </div>
      </el-card>
    </div>
    <add-customer :data="customerInfo" :visible.sync="showEdit" @done="reset" />
  </div>
</template>

<script>
import User from "./user";
import Product from './product'
// import Project from './project'
// import Invoiced from "./invoiced"
// import Order from "@/views/customer/customer/info/order/index.vue";
// import Invoice from "@/views/customer/customer/info/invoice/index.vue";
// import Contract from "@/views/customer/customer/info/contract/index.vue";
// import Financial from "@/views/customer/customer/info/financial/index.vue";
import addCustomer from "@/views/customer/customer/components/AddCustomer.vue";

export default {
  components: {
    Product,
    User,
    addCustomer,
    // Project,
    // Order,
    // Invoiced,
    // Invoice,
    // Contract,
    // Financial
  },
  data() {
    return {
      id: 1, // 客户 id
      tabsActive: "lxr",
      loading: false,
      customerInfo: {},
      showEdit: false
    }
  },
  created() {
    this.id = this.$route.query.id * 1;
  },
  watch:{
    //监听路由变化更新本地数据
    $route(){
      if(this.$route.path==='/customer/customer/info'){
        this.id= this.$route.query.id; //获取传来的参数
        this.loadData()
      }
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    reset() {
      this.loadData();
    },
    edit() {
      this.showEdit = true
    },
    loadData() {
      this.loading=true
      this.$http.get(`customers/${this.id}`).then((res) => {
        this.loading=false
        this.customerInfo = res.data.data;
      }).catch(e=>{
        this.loading=false
        this.$message.error(e.message);
      });
    }
  }
}
</script>

<style lang="scss" scoped>



.info {
  width: 96%;
  margin: 10px auto 0;
  ::v-deep  .info-content .right .info_tab[data-v-16c88beb]{
    margin: 10px 0 5px;
  }

  ::v-deep .el-tabs--border-card{
    box-shadow: none;
  }

  .info-title {
    margin: 10px 0;
    //display: flex;
    //justify-content: space-between;
    width: 100%;

    .left {
      font-size: 20px;
      color: rgb(0 0 0 / .7);
      font-weight: 600;
      border-left: 3px solid #1890ff;
    }
  }

  .info-content {
    height: 90vh;
    display: flex;
    justify-content: space-between;

    .el-card + .el-card {
      margin-top: 0;
    }

    .left {
      width: 31.3%;
      box-sizing: border-box;
      overflow: auto;

      .left-top {
        font-size: 14px;
        color: #000000;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 2px solid #eeeeee;
        box-sizing: border-box;
      }

      .left-bottom-info {
        font-size: 14px;

        .info-cus {
          display: flex;
          align-items: center;
          padding: 10px 0;
        }
      }


    }

    .right {
      width: 68%;

      .info_tab {
        margin: 5px 10px;

        div {
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
